<style>
    #search-wrapper{
        margin-bottom: 10px;
    }
    .coins{
        width: 50px;
        padding: 3px 2px;
    }
    .td-a{
        color: #01AAED;
        cursor: pointer;
    }
    .header-1{
        margin-top: 15px;
    }
    .header-2{
        margin-top: 10px;
    }
    .header-3{
        margin-top: 10px;
    }
</style>
<div class="layui-layout book-chapter-wrapper" style="padding:0 20px;">
    <div class="layui-row">
        <div class="layui-col-md4 layui-col-md-offset1">
            <table class="layui-table">
                <thead>
                <tr>
                    <th style="text-align: center">章节总数</th>
                    <th style="text-align: center">已上线章节数</th>
                    <th style="text-align: center">未上线章节数</th>
                </tr>
                </thead>
                <tbody>
                <tr align="center">
                    <td>{{.total}}</td>
                    <td>{{.online}}</td>
                    <td>{{.rest}}</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="layui-col-md4 layui-col-md-offset2">
            <table class="layui-table">
                <thead>
                <tr>
                    <th style="text-align: center">章节总字数</th>
                    <th style="text-align: center">章节总书币</th>
                </tr>
                </thead>
                <tbody>
                <tr align="center">
                    <td>{{.words}}</td>
                    <td>{{.chapterPriceSum}}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div id="search-wrapper">
        <div class="layui-row">
            <div class="layui-col-md4">
                <div class="layui-inline">
                    <div class="layui-inline">
                        <input class="layui-input name" name="name"  placeholder="请输入章节名">
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn search" data-type="reload">搜索</button>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4 layui-col-md-offset4" align="right">
                <div class="layui-inline">
                    <button class="layui-btn setCoin" style="margin-right: 50px">书币批量修改</button>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layui-btn-normal export">导出</button>
                </div>
            </div>
        </div>
    </div>
    <table class="layui-hide" id="chapter_list" lay-filter="chapter_filter">
    </table>
</div>
<script>
    layui.use(['table'], function(){
        var table = layui.table;

        //方法级渲染
        table.render({
            elem: '#chapter_list'
            ,url: '/book/chaptertable?bookId='+{{.id}}
            ,cols: [[
                {field:'', title: '', type:'checkbox'},
                {field:'id', title: '章节ID', align:'center',width:'120'},
                {field:'no', title: '章节序号', align:'center',width:'150'},
                {field:'name', title: '章节名', align:'center',width:'150'},
                {field:'words', title: '字数', align:'center',width:'150'},
                // {field:'', title: '点击数', align:'center'},
                // {field:'', title: '售出次数', align:'center'},
                // {field:'', title: '状态', align:'center'},
                // {field:'', title: '上架时间', align:'center'},
                {field:'', title: '分享地址', align:'center',width:'630',templet: function(d){
                        return "https://yhsy.98nice.com/view/home/chapter/" + d.SerialId + "/yhsy";
                    }},
                {field:'price', title: '书币', align:'center',width:'150'},
                {field:'', title: '操作', align:'center',templet: function(d){
                        return `<a class='td-a uploadChapter'>上传</a> / <a class='td-a downloadChapter'>下载</a> / <a target='
_blank' class='td-a previewChapter' href="` + `https://book-98nice.oss-cn-hangzhou.aliyuncs.com/` + '{{.ossPath}}' + `/` + '{{.bookSerialId}}' + `/` + d.SerialId + `">预览</a>`;
                    }},
            ]]
            ,id: 'listReload'
            ,page: {
                curr: location.hash.replace('#!fenye=', '') //获取起始页
                ,hash: 'fenye' //自定义hash值
            }
            ,height: "full-200"
        });

        // 选择书名或者作者名
        var $ = layui.$, active = {
            reload: function(){
                table.reload('listReload', {
                    where: {
                        name:$(".name").val()
                    }
                    ,page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            }
        };

        $('#search-wrapper .search').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        $(".export").click(function(){
            var urlParam = "?page=1&limit=99999&name="+$('.name').val() + "&bookId=" + {{.id}} + "&export=1";
            window.open('/book/chaptertable'+urlParam)
        });
        
        $(".setCoin").click(function () {
            var checkStatus = table.checkStatus('listReload'); //test即为基础参数id对应的值
            console.log(checkStatus.data); //获取选中行的数据

            if (checkStatus.data.length == 0){
                layer.msg("请先勾选要修改的章节");
                return;
            }

            var chapterNo = '';
            var ids = '';
            for (var i = 0;i < checkStatus.data.length;i ++){
                if (i == checkStatus.data.length - 1){
                    chapterNo += checkStatus.data[i].no;
                    ids += checkStatus.data[i].id;
                }else {
                    chapterNo += checkStatus.data[i].no + '、';
                    ids += checkStatus.data[i].id + ',';
                }
            }

            layer.open({
                type: 1,
                title:'批量修改书币',
                btn: ['确定', '取消'],
                area: ['370px', '200px'],
                content: `<p align="center" class="header-1">确定将选中的章节</p>
                          <p align="center" class="header-2">` + chapterNo + `</p>
                          <p align="center" class="header-3">的定价设置修改为 <input type="text" class="coins"> 书币？</p>`
                ,yes: function(index, layero){
                    //按钮【按钮一】的回调
                    var price = $(".coins").val();
                    var reg = /^\d+$/;
                    if(!reg.test(price)){
                        layer.msg("请输入合法数字");
                        return;
                    }
                    $.ajax({
                        url: {{urlfor "BookController.SetPrice"}},
                        data:{'ids':ids,'price':price,'bookId':'{{.id}}'},
                        type: 'PUT',
                        success: function( response ) {
                            if(response.status == 0){
                                $(".layui-laypage-btn").click();
                                layer.msg(response.message);
                                setTimeout(function(){
                                    layer.closeAll();
                                },500);
                            }else {
                                layer.msg(response.message);
                            }
                        }
                    });
                }
                ,btn2: function(index, layero){
                    //按钮【按钮二】的回调
                    //return false 开启该代码可禁止点击该按钮关闭
                }
            });
        });
    });
</script>